<template>
	<view class="content">
		<view class="header">
			<view class="header_bg">
				<view class="search">
					<image src="../../../static/home/search.png" mode=""></image>
					<input type="text" value="" placeholder="搜素" />
				</view>

				<view class="select">
					<view class="selectlist" v-for="(item,index) in selectlist" @click="selectchange(item.id)"
						:style="{color:a==item.id?'#FFFFFF':'',background:a==item.id?'#146DF4':''}">
						<text>{{item.title}}</text>
					</view>
				</view>


				<view class="select1">
					<view class="select1list">
						<text>年级选择</text>
						<image src="../../../static/school/xl.png" mode=""></image>
					</view>
					<view class="select1list">
						<text>年级选择</text>
						<image src="../../../static/school/xl.png" mode=""></image>
					</view>
				</view>


				<view class="inventory">
					<view class="inventory_top">
						<view class="inventory_top1">
							<view class="inventory_top1_l">

							</view>
							<view class="inventory_top1_r">
								<text>库存详情</text>
							</view>
						</view>

						<view class="inventory_top2">
							<text>查看详情 ></text>
						</view>
					</view>

					<view class="inventorylist">
						<view class="inventorylist1">
							<view class="inventorylist1_top">
								<text>全部库存</text>
							</view>
							<view class="inventorylist1_bot">
								<text>120套</text>
							</view>
						</view>
						<view class="inventorylist1">
							<view class="inventorylist1_top">
								<text>全部库存</text>
							</view>
							<view class="inventorylist1_bot">
								<text>120套</text>
							</view>
						</view>
						<view class="inventorylist1">
							<view class="inventorylist1_top">
								<text>全部库存</text>
							</view>
							<view class="inventorylist1_bot">
								<text>120套</text>
							</view>
						</view>
					</view>
				</view>

				<view class="classlist" v-for="(item,index) in cllist">
					<view class="classlist_top">
						<view class="classlist_top1">

						</view>
						<view class="classlist_top2">
							{{item.classname}}
						</view>
					</view>

					<view class="classlist_select">

						<view class="classlist_select_left">
							<view class="classlist_select_left1" @click="qxchange(item,index)">
								<view class="classlist_select_left1_q" v-show="item.qx">
								</view>
							</view>
							<view class="classlist_select_left2">
								<text>全选</text>
							</view>
						</view>

						<view class="classlist_select_right">
							<view class="classlist_select_right1">
								<button type="default">批量领取</button>
							</view>
							<view class="classlist_select_right2">
								<button type="default">批量拒绝</button>
							</view>
						</view>
					</view>

					<view class="classlistone" v-for="(itemq,index) in item.studentlist" @click="stuchange(itemq)"
						:style="{border:itemq.status?'2rpx solid #188AFF':''}">
						<view class="classlistone_left">
							<image src="../../../static/school/tx.png" mode=""></image>
						</view>

						<view class="classlistone_right">
							<view class="classlistone_right1">
								{{itemq.name}}
							</view>
							<view class="classlistone_right2">
								<view class="classlistone_right2_l">
									<text>数量： {{itemq.nmb}}</text>
								</view>
								<view class="classlistone_right2_r">
									<text>订单id {{itemq.orderid}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: 0,
				selectlist: [{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '已领取'
					},
					{
						id: 2,
						title: '未领取'
					}
				],

				cllist: [{
						id: 0,
						classname: 'A年级 A班',
						qx: false,
						studentlist: [{
								status: false,
								id: 0,
								img: '',
								name: 'A学生姓名',
								nmb: '1',
								orderid: '88888888'
							},
							{
								status: false,
								id: 0,
								img: '',
								name: 'A学生姓名',
								nmb: '1',
								orderid: '88888888'
							},
							{
								status: false,
								id: 0,
								img: '',
								name: 'A学生姓名',
								nmb: '1',
								orderid: '88888888'
							}
						]
					},
					{
						id: 0,
						classname: 'A年级 A班',
						qx: false,
						studentlist: [{
								status: false,
								id: 0,
								img: '',
								name: 'A学生姓名',
								nmb: '1',
								orderid: '88888888'
							},
							{
								status: false,
								id: 0,
								img: '',
								name: 'A学生姓名',
								nmb: '1',
								orderid: '88888888'
							},
							{
								status: false,
								id: 0,
								img: '',
								name: 'A学生姓名',
								nmb: '2',
								orderid: '88888888'
							}
						],
						aaaa:[]
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			selectchange(id) {
				this.a = id
			},
			stuchange(itemq) {
				itemq.status = !itemq.status
			},
			qxchange(item, index) {
				if (item.qx == false) {
					item.qx = true
					
					item.studentlist.map((item) => {
						item.status = true;
						
						console.log(this.aaaa)
					});
					
				} else {
					item.qx = false
					item.studentlist.map((item) => {
						item.status = false;
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 2652rpx;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		width: 750rpx;
		height: 216rpx;
		background: linear-gradient(180deg, #E5F2FF 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header_bg {

		padding-top: 32rpx;
	}

	.search {
		width: 690rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		margin: auto;
	}

	.search image {
		width: 34rpx;
		height: 34rpx;
		margin-left: 24rpx;
	}

	.search input {
		margin-left: 30rpx;
	}

	.select {
		width: 690rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 0;
		display: flex;
		align-items: center;

	}

	.selectlist {
		width: 216rpx;
		height: 64rpx;

		border-radius: 4rpx 4rpx 4rpx 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
	}

	.addresslist text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}

	.select1 {
		width: 690rpx;

		margin-top: 32rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
	}

	.select1list {
		width: 332rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #146DF4;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 16rpx 0;
	}

	.select1list image {
		width: 24rpx;
		height: 20rpx;
		margin-left: 16rpx;
	}

	.inventory {
		width: 690rpx;
		height: 288rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 0;
	}

	.inventory_top {
		margin-left: 32rpx;
		padding-top: 32rpx;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
	}

	.inventory_top1 {
		display: flex;
		align-items: center;
	}

	.inventory_top1_l {
		width: 8rpx;
		height: 32rpx;
		background: #188AFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.inventory_top1_r {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 8rpx;
	}

	.inventory_top2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #146DF4;
		margin-left: auto;
	}

	.inventorylist {
		display: flex;
		width: 626rpx;
		height: 164rpx;
		background: linear-gradient(180deg, #EFF7FF 0%, #FFFFFF 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 16rpx auto 0;
	}

	.inventorylist1 {
		width: 33%;
		display: flex;
		flex-direction: column;

	}

	.inventorylist1_top {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		margin: 32rpx auto 16rpx;
	}

	.inventorylist1_bot {
		margin: auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.classlist {
		width: 690rpx;
		height: 792rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 32rpx;

	}

	.classlist_top {
		display: flex;
		align-items: center;
		padding-top: 34rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #E3E3E3;
	}

	.classlist_top1 {
		width: 8rpx;
		height: 32rpx;
		background: #188AFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.classlist_top2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 8rpx;
	}

	.classlist_select {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.classlist_select_left {
		display: flex;
		align-items: center;
	}

	.classlist_select_left1 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		border: 3rpx solid #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.classlist_select_left1_q {
		width: 25rpx;
		height: 25rpx;
		background: #FC6D30;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
	}

	.classlist_select_left2 {
		margin-left: 10rpx;

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.classlist_select_left2 text {
		height: 38rpx;
	}

	.classlist_select_right {
		margin-left: auto;
		display: flex;
	}

	.classlist_select_right1 button {
		width: 152rpx;
		height: 50rpx;
		background: #146DF4;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
	}

	.classlist_select_right2 button {
		width: 152rpx;
		height: 50rpx;
		background: #FC6D30;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.classlistone {
		width: 626rpx;
		height: 168rpx;
		background: #F4F9FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: 24rpx auto 0;
		display: flex;
		align-items: center;
	}

	.classlistone_left {
		width: 104rpx;
		height: 104rpx;
		margin-left: 30rpx;

	}

	.classlistone_left image {
		width: 104rpx;
		height: 104rpx;
	}

	.classlistone_right {

		height: 104rpx;
	}

	.classlistone_right1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}

	.classlistone_right2 {
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: 28rpx;
	}

	.classlistone_right2_r {
		margin-left: 40rpx;
	}
</style>